<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <!--    https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css-->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<table class="table">
    <thead>
    <tr>
        <th scope="col">排名</th>
        <th scope="col">用户</th>
        <th scope="col">AC情况</th>
        <th scope="col">得分</th>
    </tr>
    </thead>
    <tbody>
    {php}$index = 1;{/php}
    {foreach $rank as $key => $ran}
    <tr>
        <th scope="row" style="width: 10%">{$index}</th>
        <td style="width: 15%">{$ran->user_name}</td>
        <td style="width: 65%;text-align: center">
            {foreach $ran->states as $key => $state}
                {switch $state}
                {case 1}
                <div class="alert alert-success" style="width: 30%;float: left;margin-left: 5px">
                    AC
                </div>
                {/case}
                {case 2}
                <div class="alert alert-danger" style="width: 30%;float: left;margin-left: 5px" >
                    WA
                </div>
                {/case}
                {case 0}
                <div class="alert alert-dark" style="width: 30%;float: left;margin-left: 5px">
                    /
                </div>
                {/case}
            {/switch}
            {/foreach}
        </td>
        <td style="width: 10%">{$ran->score}</td>
    </tr>
    {php}$index++;{/php}
    {/foreach}
    </tbody>
</table>
<hr>
</body>
</html>